<template>
  <div>
    <!-- 登录注册切换 -->
    <loginOfRegister :className="1" @loginClick="loginClick" @registerClick="registerClick"></loginOfRegister>
    <div class="location">
      <!-- input输入框 -->
      <inputBox :inputArr="inputArrData" :btnValue="'登录'" @overClick="overClick"></inputBox>
    </div>
  </div>
</template>

<script>
import loginOfRegister from "../components/loginOfRegister";
import inputBox from "../components/inputBox";

export default {
  data() {
    return {
      inputArrData: [
        {
          name: "move账号",
          type: "text"
        },
        {
          name: "密码",
          type: "password"
        }
      ]
    };
  },
  methods: {
    loginClick() {},
    registerClick() {
      this.$router.push({ path: "/register" });
    },
    overClick(itemData) {
      // 提交键数组
      const keyArray = ["username", "password"];
      // 准备提交的数据
      const submitData = {};
      // 判断长度正则表达式
      const LengthRegExp = /^.{6,10}$/;
      // 判断含有空格正则表达式
      const blankRegExp = /\s+/g;
      // 计量 count
      let count = 0;
      // forin 遍历数组
      for (const index in itemData) {
        if (itemData.hasOwnProperty(index)) {
          const element = itemData[index];
          //判断昵称是否相同
          if (
            this.inputArrData[index].name == element.name &&
            element.value != undefined
          ) {
            //  判断是否含有空白字符 &&  判断长度是否正确 不符合标准函数取消执行
            if (
              !blankRegExp.test(element.value) &&
              LengthRegExp.test(element.value)
            ) {
              // value符合的时候+1
              count++;
              // 给提交的数据赋值
              submitData[keyArray[index]] = element.value;
            }
          }
        }
      }
      // 检测正确的参数长度是否和原本数组的长度相同
      if (count == itemData.length || true) { //注意这里!!!
        this.$axios({
          method: "post",
          url: "/login",
          data: submitData
          // data:{
             // username:'10086',password:'123' //注意这里!!!
          // }
        }).then(res => {

          const { data } = res;
          if (data.statusCode) {
            // 密码或名字错误
            console.log(data.message);
          } else {
            //这是成功
            console.log(data.message);
            // 存入本地存储
            localStorage.setItem("token", data.data.token);
            localStorage.setItem("user_id", data.data.user.id);
            this.$router.push({ path:'/' })
          }
        });
      } else {
        console.log("提交失败");
      }
    }
  },
  components: {
    loginOfRegister,
    inputBox
  }
};
</script>

<style lang="less" scoped>
.location {
  position: absolute;
  top: 135px;
  left: 50%;
  transform: translateX(-50%);
}
</style>